<template>
  <div id="quan">
    <div class="topbox">
        <h2>{{ticket.couponAmount}}<span>元</span></h2>
        <p>{{ticket.couponName}}</p>
        <h3>请油站收银员扫码核销</h3>
      <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
    <div class="bottomBox">
        <img src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/background/logo.png" alt="">
        <p>全国统一客服电话：95504</p>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import req from "@/utils/index";
export default {
    data(){
        return {
            ticket: '',
            timer: null
        }
    },
  methods: {
    creatQrCode(data) {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: data, // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    getQuanUsed(data) {
        clearInterval(this.timer)
        this.timer = setInterval(()=>{
            req('get', '/user/coupon/info?couponNo=' + data, {}).then(res => {
            if (res.rspCode == '000000') {
                if (res.data.status == "3") {
                    this.$router.push({name: 'index'})
                }
            }
        })
        }, 1000)
    }
  },
  mounted() {
    this.ticket = JSON.parse(this.$route.params.item)
    console.log(this.ticket)
    req('post', `/qyHome/coupon/detail`, {
        ticketNum: this.ticket.ticketNum
    }).then(res => {
        // console.log(res)
        if (res.rspCode == '000000') {
            this.creatQrCode(res.data);
            this.getQuanUsed(res.data)
        }
    })
  },
  beforeDestroy(){
      clearInterval(this.timer)
  }
};
</script>

<style lang="scss" scoped>
.qrcode {
  display: inline-block;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}
.topbox {
  position: relative;
  width: 95%;
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/background/payokBg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  padding-top: 1rem;
  box-sizing: border-box;
  margin: 1rem auto;
  h2 {
      color: red;
      font-size: 1.5rem;
      margin: 1rem 0 0 0;
      padding: 0;
      span {
          font-size: .6rem;
      }
  }
  p {
      margin: .5rem 0 1rem 0;
    font-size: .5rem;
  }
  h3 {
      font-size: .6rem;
  }
}
.bottomBox {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: .3rem;
    text-align: center;
    img {
        width: 80%;
    }
    p {
        color: #9d9d9d;
    }
}
</style>